.connection {
    stroke: #999;
}

.connection-wrap {
    stroke-linecap: butt;
    transition: all 0.5s linear 0.2s;
}

.connection-wrap:hover {
    stroke: black;
    stroke-width: 9px;
    transition: all 0s;
}

.link-tools .tool-remove circle {
    fill: white;
    stroke: #ccc;
    stroke-width: 1px;
    stroke-opacity: .5;
}

.link-tools .tool-remove:hover circle {
    fill: #e74c3c;
    stroke: #c0392b;
}

.link-tools .tool-remove path {
    stroke: #ccc;
}

.link-tools .tool-remove circle {
    transition: fill 1s;
}

.link-tools .tool-remove:hover path {
    stroke: none;
}

.link-tools .tool-monitor circle {
    fill: white;
    stroke: #ccc;
    stroke-width: 1px;
    stroke-opacity: .5;
}

.link-tools .tool-monitor:hover circle {
    fill: #4c3ce7;
    stroke: #392bc0;
}

.link-tools .tool-monitor path {
    stroke: #ccc;
}

.link-tools .tool-monitor circle {
    transition: fill 1s;
}

.link-tools .tool-monitor:hover path {
    stroke: none;
}

.marker-arrowhead, .marker-vertex {
    fill: #fff;
    stroke: #7f8c8d;
    stroke-opacity: 0.4;
    stroke-width: 2px;
}

.marker-arrowhead:hover,  .marker-vertex:hover {
    fill: #ecf0f1;
    stroke: #bdc3c7;
}

.marker-vertex-remove-area {
    fill: white;
    stroke: #ccc;
    stroke-opacity: .5;
}

.marker-vertex-remove-group:hover .marker-vertex-remove-area {
    transition: fill 1s;
    fill: #e74c3c;
    stroke: #c0392b;
}

.marker-vertex-remove {
    stroke: #eee;
}

.marker-vertex-remove-group:hover .marker-vertex-remove {
    stroke: none;
}

.joint-element .highlighted {
    outline: none;
    fill: #ecf0f1;
    stroke: #bdc3c7;
    cursor: crosshair;
}

.joint-element .body {
    fill: white;
    stroke: black;
    transition: all 0.2s;
}

.joint-element circle {
    fill: #fff;
    stroke: #7f8c8d;
    stroke-opacity: 0.5;
    stroke-width: 2px;
}

.joint-element circle.live {
    stroke: #03c03c;
}

.joint-element circle.low {
    stroke: #fc7c68;
}

.joint-element circle.defined {
    stroke: #779ecb;
}

.joint-element circle.led.live {
    fill: #03c03c;
}

.joint-element circle.led.low {
    fill: #fc7c68;
}

.joint-element text {
    font-size: 8pt;
}

.joint-element text.bits {
    font-size: 7pt;
}

.joint-link.live > .connection {
    stroke: #03c03c;
}

.joint-link.low > .connection {
    stroke: #fc7c68;
}

.joint-link.defined > .connection {
    stroke: #779ecb;
}

.joint-link.bus > .connection {
    stroke-width: 4px;
}

.joint-link .label > text {
    font-size: 8pt;
}

.joint-element.live .body {
    fill: #FEB662;
    stroke: #CF9452;
}

.joint-element.live text {
    fill: #ffffff;
}
.wire {
    stroke: #4B4F6A;
}



/* .viewport is a <g> node wrapping all diagram elements in the paper */
.joint-viewport {
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
}

.joint-paper > svg,
.joint-paper-background,
.joint-paper-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/*
1. IE can't handle paths without the `d` attribute for bounding box calculation
2. IE can't even handle 'd' attribute as a css selector (e.g path[d]) so the following rule will
   break the links rendering.

path:not([d]) {
    display: none;
}

*/


/* magnet is an element that can be either source or a target of a link */
[magnet=true]:not(.joint-element) {
   cursor: crosshair;
}
[magnet=true]:not(.joint-element):hover {
   opacity: .7;
}

/*

Elements have CSS classes named by their types. E.g. type: basic.Rect has a CSS class "element basic Rect".
This makes it possible to easilly style elements in CSS and have generic CSS rules applying to
the whole group of elements. Each plugin can provide its own stylesheet.

*/

.joint-element {
   /* Give the user a hint that he can drag&drop the element. */
   cursor: move;
}

.joint-element * {
   user-drag: none;
}

.joint-element .scalable * {
   /* The default behavior when scaling an element is not to scale the stroke in order to prevent the ugly effect of stroke with different proportions. */
   vector-effect: non-scaling-stroke;
}
/*

connection-wrap is a <path> element of the joint.dia.Link that follows the .connection <path> of that link.
In other words, the `d` attribute of the .connection-wrap contains the same data as the `d` attribute of the
.connection <path>. The advantage of using .connection-wrap is to be able to catch pointer events
in the neighborhood of the .connection <path>. This is especially handy if the .connection <path> is
very thin.

*/

.marker-source,
.marker-target {
   /* This makes the arrowheads point to the border of objects even though the transform: scale() is applied on them. */
   vector-effect: non-scaling-stroke;
}

/* Paper */
.joint-paper {
    position: relative;
}
/* Paper */

/*  Highlighting  */
.joint-highlight-opacity {
    opacity: 0.3;
}
/*  Highlighting  */

/*

Vertex markers are `<circle>` elements that appear at connection vertex positions.

*/

.joint-link .connection-wrap,
.joint-link .connection {
   fill: none;
}

/* <g> element wrapping .marker-vertex-group. */
.marker-vertices {
   opacity: 0;
   cursor: move;
}
.marker-arrowheads {
   opacity: 0;
   cursor: move;
   cursor: -webkit-grab;
   cursor: -moz-grab;
/*   display: none;   */   /* setting `display: none` on .marker-arrowheads effectivelly switches of links reconnecting */
}
.link-tools {
   opacity: 0;
   cursor: pointer;
}
.link-tools .tool-options {
   display: none;       /* by default, we don't display link options tool */
}
.joint-link:hover .marker-vertices,
.joint-link:hover .marker-arrowheads,
.joint-link:hover .link-tools {
   opacity: 1;
}

/* <circle> element used to remove a vertex */
.marker-vertex-remove {
   cursor: pointer;
   opacity: .1;
}

.marker-vertex-group:hover .marker-vertex-remove {
   opacity: 1;
}

.marker-vertex-remove-area {
   opacity: .1;
   cursor: pointer;
}
.marker-vertex-group:hover .marker-vertex-remove-area {
   opacity: 1;
}

/*
Example of custom changes (in pure CSS only!):

Do not show marker vertices at all:  .marker-vertices { display: none; }
Do not allow adding new vertices: .connection-wrap { pointer-events: none; }
*/

/* foreignObject inside the elements (i.e joint.shapes.basic.TextBlock) */
.joint-element .fobj {
    overflow: hidden;
}
.joint-element .fobj body {
    background-color: transparent;
    margin: 0px;
    position: static;
}
.joint-element .fobj div {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    padding: 0px 5px 0px 5px;
}

/* Paper */
.joint-paper.joint-theme-dark {
    background-color: #18191b;
}
/* Paper */

/*  Links  */
.joint-link.joint-theme-dark .connection-wrap {
    stroke: #8F8FF3;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    cursor: move;
}
.joint-link.joint-theme-dark .connection-wrap:hover {
    opacity: .4;
    stroke-opacity: .4;
}
.joint-link.joint-theme-dark .connection {
    stroke-linejoin: round;
}
.joint-link.joint-theme-dark .link-tools .tool-remove circle {
    fill: #F33636;
}
.joint-link.joint-theme-dark .link-tools .tool-remove path {
    fill: white;
}
.joint-link.joint-theme-dark .link-tools [event="link:options"] circle {
    fill: green;
}
/* <circle> element inside .marker-vertex-group <g> element */
.joint-link.joint-theme-dark .marker-vertex {
    fill: #5652DB;
}
.joint-link.joint-theme-dark .marker-vertex:hover {
    fill: #8E8CE1;
    stroke: none;
}
.joint-link.joint-theme-dark .marker-arrowhead {
    fill: #5652DB;
}
.joint-link.joint-theme-dark .marker-arrowhead:hover {
    fill: #8E8CE1;
    stroke: none;
}
/* <circle> element used to remove a vertex */
.joint-link.joint-theme-dark .marker-vertex-remove-area {
    fill: green;
    stroke: darkgreen;
}
.joint-link.joint-theme-dark .marker-vertex-remove {
    fill: white;
    stroke: white;
}
/*  Links  */
/* Paper */
.joint-paper.joint-theme-default {
    background-color: #FFFFFF;
}
/* Paper */

/*  Links  */
.joint-link.joint-theme-default .connection-wrap {
    stroke: #000000;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    cursor: move;
}
.joint-link.joint-theme-default .connection-wrap:hover {
    opacity: .4;
    stroke-opacity: .4;
}
.joint-link.joint-theme-default .connection {
    stroke-linejoin: round;
}
.joint-link.joint-theme-default .link-tools .tool-remove circle {
    fill: #FF0000;
}
.joint-link.joint-theme-default .link-tools .tool-remove path {
    fill: #FFFFFF;
}
.joint-link.joint-theme-default .link-tools .tool-monitor circle {
    fill: #0000FF;
}
.joint-link.joint-theme-default .link-tools .tool-monitor path {
    fill: #FFFFFF;
}

/* <circle> element inside .marker-vertex-group <g> element */
.joint-link.joint-theme-default .marker-vertex {
    fill: #1ABC9C;
}
.joint-link.joint-theme-default .marker-vertex:hover {
    fill: #34495E;
    stroke: none;
}

.joint-link.joint-theme-default .marker-arrowhead {
    fill: #1ABC9C;
}
.joint-link.joint-theme-default .marker-arrowhead:hover {
    fill: #F39C12;
    stroke: none;
}

/* <circle> element used to remove a vertex */
.joint-link.joint-theme-default .marker-vertex-remove {
    fill: #FFFFFF;
}
/*  Links  */

body {
    font-family: 'verdana', sans-serif;
    font-weight: normal;
    font-style: normal;
}

/*  Links  */
.joint-link.joint-theme-material .connection-wrap {
    stroke: #000000;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    cursor: move;
}
.joint-link.joint-theme-material .connection-wrap:hover {
    opacity: .4;
    stroke-opacity: .4;
}
.joint-link.joint-theme-material .connection {
    stroke-linejoin: round;
}
.joint-link.joint-theme-material .link-tools .tool-remove circle {
    fill: #C64242;
}
.joint-link.joint-theme-material .link-tools .tool-remove path {
    fill: #FFFFFF;
}

/* <circle> element inside .marker-vertex-group <g> element */
.joint-link.joint-theme-material .marker-vertex {
    fill: #d0d8e8;
}
.joint-link.joint-theme-material .marker-vertex:hover {
    fill: #5fa9ee;
    stroke: none;
}

.joint-link.joint-theme-material .marker-arrowhead {
    fill: #d0d8e8;
}
.joint-link.joint-theme-material .marker-arrowhead:hover {
    fill: #5fa9ee;
    stroke: none;
}

/* <circle> element used to remove a vertex */
.joint-link.joint-theme-material .marker-vertex-remove-area {
    fill: #5fa9ee;
}
.joint-link.joint-theme-material .marker-vertex-remove {
    fill: white;
}
/*  Links  */

/*  Links  */
.joint-link.joint-theme-modern .connection-wrap {
    stroke: #000000;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    cursor: move;
}
.joint-link.joint-theme-modern .connection-wrap:hover {
    opacity: .4;
    stroke-opacity: .4;
}
.joint-link.joint-theme-modern .connection {
    stroke-linejoin: round;
}
.joint-link.joint-theme-modern .link-tools .tool-remove circle {
    fill: #FF0000;
}
.joint-link.joint-theme-modern .link-tools .tool-remove path {
    fill: #FFFFFF;
}

/* <circle> element inside .marker-vertex-group <g> element */
.joint-link.joint-theme-modern .marker-vertex {
    fill: #1ABC9C;
}
.joint-link.joint-theme-modern .marker-vertex:hover {
    fill: #34495E;
    stroke: none;
}

.joint-link.joint-theme-modern .marker-arrowhead {
    fill: #1ABC9C;
}
.joint-link.joint-theme-modern .marker-arrowhead:hover {
    fill: #F39C12;
    stroke: none;
}

/* <circle> element used to remove a vertex */
.joint-link.joint-theme-modern .marker-vertex-remove {
    fill: white;
}
/*  Links  */

.btnface.live {
    fill: black;
}

.joint-element foreignObject {
    overflow: hidden;
}

.joint-element foreignObject body {
    background-color: transparent;
    display: block;
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: initial;
}

.joint-element foreignObject body input,
.joint-element foreignObject body select {
    pointer-events: all;
}

.joint-element foreignObject body input[type='text'],
.joint-element foreignObject body select {
    font-size: 8pt;
    border: 1px solid gray;
    box-sizing: border-box;
    position: absolute;
    transform: translate(0, -50%);
    top: 50%;
}

.joint-element foreignObject body input[type='text'] {
    font-family: 'monospace';
    width: 100%;
}

.joint-element foreignObject body a {
    text-decoration: none;
}

.joint-element input.invalid {
    background: #ffaaaa;
}

.joint-element foreignObject.tooltip {
    visibility: hidden;
    opacity:0;
    transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}

.joint-element foreignObject.tooltip:hover,
g:hover > foreignObject.tooltip {
    visibility: visible;
    opacity:1;
    transition-delay:0s;
}

.joint-element foreignObject.tooltip body {
    border: 1px solid gray;
    box-sizing: border-box;
    background: white;
    padding: 5px;
}

div.wire_hover {
    position: fixed;
    pointer-events: none;
    background: white;
    border: 1px solid black;
    padding: 5px;
    font-size: 8pt;
    z-index: 200;
}

.joint-element .numvalue {
    font-family: monospace;
    font-size: 10px;
}

.joint-element text.numvalue {
    fill: black;
    text-anchor: middle;
}

table.monitor tr {
  padding: 0; margin: 0;
  font-size: 10px;
}

table.monitor td {
  padding: 0; margin: 0;
}

table.monitor {
  border-collapse: collapse;
  width: 100%;
}

table.monitor td.name {
  width: 100%;
}

canvas.wavecanvas {
  display: block;
}

